<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖(此处引入的是本地的依赖) -->
    <script src="/OL_SDK/include-openlayers-local.js"></script>
    <!-- 下面这种，出不来 -->
    <!-- <script src="./OL_SDK/include-openlayers-local.js"></script> -->
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 获取mapgis中数据  --ajax-axios */
        // new Zondy.Map.Doc就相当于一个 ajax 请求
        // 第一个参数不传，第二个参数传igserver服务的名称，第三个参数传gis服务（igserver服务的接口）
        // 读igserver服务的接口，:
        // http://localhost:9999/manager/static/map/index.html#/vector?port=6163&name=threePoints

        // ----------------接口请求--------------------------------------------------------

        var docLayer = new Zondy.Map.Doc("", "firstMapx", {
            // ip: "localhost", // ip是localhost
            // port: 6163 // 端口是6163
        })
        console.log(docLayer)// docLayer即为像我们自己做的服务请求到的地图图层【放到openlayer的layers配置选项中。】

        // --------------------openlayer显示地图------------------------------------------

        const map = new ol.Map({
            /* el  $mount  设置实例的地图到对应的DOM元素之上 */
            target: "map",
            /* 设置地图的图层 */
            layers: [docLayer],
            /* 设置地图以什么的视角显示 中心,放大缩小级别,显示数据的坐标 */
            view: new ol.View({
                // 中心
                center: [114.30, 30.50],
                // 放大缩小级别
                zoom: 10,
                // 显示数据的坐标(投影坐标)
                /* 地球质心原点  设置坐标   
                mapgis wgs:84 
                美国制定的标准：wgs:84   
                欧洲制定的标准：EPSG:4326  但这两个标准都是以零度经线、零度纬线作为原点 
                【EPSG是一个石油组织】（所以wgs:84 和 EPSG:4326是一样的）
                中国制定的标准：CGCS2000   和美国/欧洲标准有一些误差，误差为几毫米
                // 虽然有误差，但这三者可以理解为指向同一个坐标，因为误差极小。
                 */
                // openlayer里面支持wgs:84，但是写法不叫wgs84
                // 换成 EPSG:4326
                projection: 'EPSG:4326'
            })
        })
        /*
        就像w3c moz 也是指定标准的组织一样 
         */
        // ！！！在这里看地图，一定要以服务的方式去看，
        // 1. live server 
        // 或 
        // 2. 安装vscode插件-open in default brower Ctrl 1快捷键
        // 【右键，在浏览器中打开】
    </script>
</body>

</html>